<template>
    <view class="container">
        <!-- 顶部标题 -->
        <view class="header">
            <view class="title">
                <text class="fs-40 fw-b">我的训练计划</text>
            </view>
            <view class="subtitle mt-10">
                <text class="fs-28 text-gray">坚持训练，健康生活</text>
            </view>
        </view>

        <!-- 日期显示 -->
        <view class="date-card">
            <view class="date-info">
                <text class="fs-32 fw-b">{{ currentDate }}</text>
            </view>
        </view>

        <!-- 训练计划卡片 -->
        <view class="plan-card" v-if="trainData && !isEmpty(trainData.train_list)">
            <view class="plan-header">
                <text class="fs-36 fw-b">{{ trainData.train_title }}</text>
                <view class="progress-info mt-20">
                    <view class="progress-text f f-bt mb-10">
                        <text class="fs-28">完成进度</text>
                        <text class="fs-28">{{ completedCount }}/{{ totalCount }}</text>
                    </view>
                    <progress :percent="progressPercent" activeColor="#10AEFF" stroke-width="6" />
                </view>
            </view>

            <view class="plan-list mt-30">
                <view
                    class="plan-item f f-bt"
                    v-for="(item, index) in trainData.train_list"
                    :key="index"
                >
                    <view class="item-info f">
                        <view class="item-title ml-20">
                            <text class="fs-32 line1">{{ item.video_title }}</text>
                        </view>
                    </view>
                    <view class="item-status">
                        <image
                            :src="
                                item.train_status
                                    ? '/static/icon/train_finish.png'
                                    : '/static/icon/train_unfinished.png'
                            "
                            mode="aspectFit"
                        ></image>
                    </view>
                </view>
            </view>

            <view class="plan-footer mt-30">
                <button class="view-btn" @click="navigateToPlanDetail">进入训练</button>
            </view>
        </view>

        <!-- 无训练计划时显示 -->
        <view class="empty-plan" v-else>
            <view class="empty-icon">
                <uni-icons type="calendar" size="80" color="#CCCCCC"></uni-icons>
            </view>
            <view class="empty-text mt-20">
                <text class="fs-32">今日暂无训练计划</text>
            </view>
            <view class="empty-subtext mt-10">
                <text class="fs-28 text-gray">请联系您的医生安排训练计划</text>
            </view>
        </view>
    </view>
</template>

<script>
import { getUserTrain } from '@/api/modules/common';
import _ from 'lodash';

export default {
    data() {
        return {
            trainData: null,
            currentDate: ''
        };
    },
    computed: {
        // 计算总训练项目数
        totalCount() {
            return this.trainData && this.trainData.train_list
                ? this.trainData.train_list.length
                : 0;
        },
        // 计算已完成训练项目数
        completedCount() {
            if (!this.trainData || !this.trainData.train_list) return 0;
            return this.trainData.train_list.filter(item => item.train_status === 1).length;
        },
        // 计算进度百分比
        progressPercent() {
            if (this.totalCount === 0) return 0;
            return Math.floor((this.completedCount / this.totalCount) * 100);
        }
    },
    onLoad() {
        this.formatCurrentDate();
    },
    onShow() {
        this.getUserTrainData();
    },
    methods: {
        isEmpty(data) {
            return _.isEmpty(data);
        },
        // 格式化当前日期
        formatCurrentDate() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekday = weekdays[now.getDay()];

            this.currentDate = `${year}年${month}月${day}日 ${weekday}`;
        },
        // 获取今日训练数据
        async getUserTrainData() {
            try {
                const { data } = await getUserTrain();
                this.trainData = data;
            } catch (error) {
                console.error('获取训练数据失败:', error);
                uni.showToast({
                    title: '获取训练数据失败',
                    icon: 'none'
                });
            }
        },
        // 跳转到计划详情页面
        navigateToPlanDetail() {
            if (!this.trainData) return;

            uni.navigateTo({
                url: `/pages/daily-plan/plan-detail?train_id=${this.trainData.train_id}`
            });
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 30rpx;
    min-height: 100vh;
    background-color: #f5f7fa;
}

.header {
    padding: 20rpx 0 40rpx;

    .text-gray {
        color: #666;
    }
}

.date-card {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    border-radius: 20rpx;
    padding: 30rpx;
    color: #fff;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.plan-card {
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .plan-header {
        border-bottom: 1px solid #eee;
        padding-bottom: 30rpx;
    }

    .plan-item {
        padding: 30rpx 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .item-icon {
            width: 80rpx;
            height: 80rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .item-title {
            max-width: 400rpx;
            display: flex;
            align-items: center;
        }

        .item-status {
            width: 50rpx;
            height: 50rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }
    }

    .plan-footer {
        .view-btn {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
            color: #fff;
            border-radius: 50rpx;
            font-size: 32rpx;
            font-weight: bold;
            border: none;
            padding: 20rpx 0;
        }
    }
}

.empty-plan {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100rpx 0;
    background-color: #fff;
    border-radius: 20rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .empty-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160rpx;
        height: 160rpx;
        background-color: #f5f7fa;
        border-radius: 50%;
    }

    .empty-text {
        font-weight: 500;
    }

    .text-gray {
        color: #999;
    }
}

.loading {
    padding: 30rpx 0;
}
</style>
